<template>
  <!-- 创建订单页面 -->
  <div class="con_order_div">
   <!-- 头部组件 -->
    <my-header title="确认订单" :left="true">
      <!-- 插入 右侧icon -->
      <template class="right_icon" #right_icon>
        <van-popover  v-model="showPopover" theme="dark" trigger="click" placement="bottom-end" >
          <!-- 第一行 首页 -->
          <van-row @click="showPopover=false;$router.push('/home');">
            <!-- 图标部分 -->
            <van-col sapn="4" offset="4">
              <span class="iconfont icon-shouye"></span>
            </van-col>
            <!-- 文字部分 -->
            <van-col sapn="15" offset="1">
              <span class="icon_font">首页</span>
            </van-col>
          </van-row>
          <!-- 第二行 消息-->
           <van-row  @click="showPopover=false;$router.push('/message');">
            <!-- 图标部分 -->
            <van-col sapn="4" offset="4">
              <span class="iconfont icon-youjian"></span>
            </van-col>
            <!-- 文字部分 -->
            <van-col sapn="15" offset="1">
              <span class="icon_font">消息</span>
            </van-col>
          </van-row>
          <template #reference>
            <span class="iconfont icon-gengduo"></span>
          </template>
        </van-popover>
      </template>
    </my-header>
    <!-- 顶部提示消息 -->
    <div class="tips" v-if="gameinfo.oper == 'IOS'">该角色限iOS版登录，安卓设备无法使用</div>
    <div class="tips" v-else>该角色限安卓版登录，IOS设备无法使用</div>
    <!-- 收回账号部分 -->
    <div class="collId">
      <!-- 分为一行 两列 -->
      <van-row>
        <!-- 收货人 图标部分 -->
        <van-col span="2">
          <div class="img_warp">
            <img src="../../assets/img/order/shou.png">
          </div>
        </van-col>
         <!-- 文字部分 -->
        <van-col span="22">
          <p class="font1">收货帐号: RabbitHouse</p>
          <p class="font2">迷案馆等app类联动玩法在角色交易后将无法继续进行。</p>
        </van-col>
      </van-row>
    </div>
    <!-- 账号数据展示部分 -->
    <div class="gameinfo_area">
      <div v-if="skin_data.gameid" class="gameinfo">
        <show-info
          v-for="(item,index) of skin_data.gameid" 
          :key="item.gameid"
          :game_data_index="index" 
          :game_data="skin_data">
        </show-info>
      </div>
      <div v-if="!skin_data.gameid">
        <van-loading class="mt60" size="0.24rem" vertical>账号信息加载中...</van-loading>
      </div>
    </div>
    <!-- 优惠卷部分 -->
    <div class="coupon">
    <!-- 优惠券单元格 -->
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />
    <!-- 优惠券列表 -->
    <van-popup
      v-model="showList"
      round
      position="bottom">
    <van-coupon-list
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      :disabled-coupons="disabledCoupons"
      @change="onChange"
      @exchange="onExchange"
      :show-exchange-bar="false"
      show-count/>
    </van-popup>
    </div>
    <!-- 温馨提示部分 -->
    <div class="reminder_div">
      <p>温馨提示：</p>
      <p>1.下单并未支付的商品仍可以被其他买家购买，建议您尽快支付；</p>
      <p>2.多人同时支付同一商品时，最先付款成功的买家获得商品，后付款的订单会自动取消，资金将原路退回。</p>
    </div>
    <!-- 底部支付按钮 -->
    <div class="payment">
      <van-row>
        <!-- 左面显示价格 -->
        <van-col span="12" class="price">
          <p>
            <span>仍需支付：</span>
            <span class="id5_red">¥{{pay_price}}</span>
          </p>
        </van-col>
        <!-- 右面 立即支付 按钮 -->
        <van-col span="12" class="pay">
          <van-button :disabled="!skin_data.gameid" @click="pay">立即支付</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import MyHeader from "../common/Header";// 头部组件
import ShowInfo from "../Home/components/ShowInFo";// 账号信息展示部分
export default {
  name:"ConOrder",
  components:{
    MyHeader,
    ShowInfo
  },
  created() {
    // 赋值 gameinfo
    // console.log(this.$route.query);
    this.gameinfo.gid = this.$route.query.gameid
    this.gameinfo.oper = this.$route.query.OperSys
    this.getGameInfoByGID();
    console.log(this.gameinfo.oper);
  },
  data() {
    return {
      showPopover:false,// 气泡 的显示控制
      gameinfo:{// 需要查询的游戏账号数据
        gid:null,
        oper:"",
      },
      good_price:0.00,// 账号价格 (原价)
      pay_price:0.00,// 最终支付的价格
      skin_data:"", // 查询到的游戏账号皮肤数据
      showList:false,// 优惠卷的显示和隐藏
      chosenCoupon: -1,// 当前选择的优惠卷
      choesnCoupon_id:-1,// 当前选择的优惠卷ID
      coupons: [], // 可用优惠卷
      disabledCoupons: [],// 不可用优惠卷
    }
  },
  methods: {
    // 根据 游戏账号ID 获取信息
    async getGameInfoByGID(){
      // 发起数据请求
      const {data:res} = await this.$http.get("getGameInfoByGID",{params:this.gameinfo});
      if(res.status == 403){
        // 登录过期
        return this.$router.push("/login");
      }
      this.good_price = res.data.gameid[0].game_price;// 赋值账号价格
      this.pay_price = res.data.gameid[0].game_price;// 赋值账号价格
      this.skin_data = res.data;
      // 循环加入数组展示数据
      // 当前为可用优惠卷
      for (let index = 0; index < this.skin_data.coupons.length; index++) {
        let now_coupon = this.skin_data.coupons[index];
        let show_condition = "";// 显示优惠卷条件
        if((now_coupon.Threshold - 0) == 0){
          show_condition+="无门槛优惠卷\n"
        }
        // 当前为折扣卷
        let show_unitDesc = ""; // 显示的单位
        let show_value = 0; // 抵扣的金额 单位：分
        let show_valueDesc = 0; // 显示的优惠卷面额
        if(now_coupon.Coupon_type == 2){
          // 当前卷 为折扣卷
          // 折扣卷 最大面额为空  或者 0 则代表无上线
          if(now_coupon.Max_price != "" && (now_coupon.Max_price - 0) != 0){
            // 不为空 或 0
            show_condition+="最多优惠"+this.accDiv(now_coupon.Max_price,100)+"元";
            show_value = ((this.good_price - (this.good_price * now_coupon.Coupon_money)) * 100).toFixed(2);
          }
          // 如果 最后折扣的价格 大于 最大优惠价格
          if((this.good_price - (this.good_price * now_coupon.Coupon_money)) * 100 > this.accDiv(now_coupon.Max_price,100)){
            // 最终优惠价格  =  最大优惠价格
            show_value = now_coupon.Max_price;
          }else{
            // 计算 优惠价格
            show_value = ((this.good_price - (this.good_price * now_coupon.Coupon_money)) * 100).toFixed(2);
          }
          show_unitDesc = "折";
          show_valueDesc = now_coupon.Coupon_money * 10
        }else{
          // 当前为现金券
          show_unitDesc = "元"
          show_value = now_coupon.Coupon_money;
          show_valueDesc = this.accDiv(now_coupon.Coupon_money,100).toFixed(2);
        }
        this.coupons.push({
          type:now_coupon.Coupon_type,
          available: now_coupon.Coupon_id,
          condition: show_condition,
          reason: '',
          value: show_value,
          name: now_coupon.Coupon_desc,
          startAt: now_coupon.Start_date,
          endAt: now_coupon.End_date,
          valueDesc: show_valueDesc,
          unitDesc: show_unitDesc,
        })
      }
      // 当前为不可用优惠卷
      for (let index = 0; index < this.skin_data.desc_coupons.length; index++) {
        let now_coupon = this.skin_data.desc_coupons[index];
        let show_condition = "";// 显示优惠卷条件
        if((now_coupon.Threshold - 0) == 0){
          show_condition+="无门槛优惠卷\n"
        }
        // 当前为折扣卷
        let show_unitDesc = ""; // 显示的单位
        let show_value = 0; // 抵扣的金额 单位：分
        let show_valueDesc = 0; // 显示的优惠卷面额
        if(now_coupon.Coupon_type == 2){
          // 当前卷 为折扣卷
          // 折扣卷 最大面额为空  或者 0 则代表无上线
          if(now_coupon.Max_price != "" && (now_coupon.Max_price - 0) != 0){
            // 不为空 或 0
            show_condition+="最多优惠"+this.accDiv(now_coupon.Max_price,100)+"元";
            show_value = ((this.good_price - (this.good_price * now_coupon.Coupon_money)) * 100).toFixed(2);
          }
          // 如果 最后折扣的价格 大于 最大优惠价格
          if((this.good_price - (this.good_price * now_coupon.Coupon_money)) * 100 > this.accDiv(now_coupon.Max_price,100)){
            // 最终优惠价格  =  最大优惠价格
            show_value = this.accDiv(now_coupon.Max_price,100);
          }else{
            // 计算 优惠价格
            show_value = ((this.good_price - (this.good_price * now_coupon.Coupon_money)) * 100).toFixed(2);
          }
          show_unitDesc = "折";
          show_valueDesc = now_coupon.Coupon_money * 10
        }else{
          // 当前为现金券
          show_unitDesc = "元"
          show_value = now_coupon.Coupon_money;
          show_valueDesc = this.accDiv(now_coupon.Coupon_money,100);
        }

        this.disabledCoupons.push({
          type:now_coupon.Coupon_type,
          available: now_coupon.Coupon_id,
          condition: show_condition,
          reason: this.skin_data.desc_coupons_reason[index],
          value: show_value,
          name: now_coupon.Coupon_desc,
          startAt: now_coupon.Start_date,
          endAt: now_coupon.End_date,
          valueDesc: show_valueDesc,
          unitDesc: show_unitDesc,
        })
      }
    },
    // 当优惠卷发生改变时
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
      this.calcPrice();
    },
    // 计算价格
    calcPrice(){
      if(this.chosenCoupon == -1){
        // 暂未使用优惠卷
        this.pay_price = this.good_price;// 最终的支付的价格  = 账号原价
      }else{
        // 使用了优惠卷
        let chooes_coupon = this.coupons[this.chosenCoupon]; //获取选择的优惠卷
        this.choesnCoupon_id = chooes_coupon.available;
        console.log(chooes_coupon);
        // 判断优惠卷类型
        if(chooes_coupon.type == 2){
          // 当前为折扣卷
          let coupon_prcie = 0;// 可以优惠的价格
          // 计算可优惠价格   商品价格 - 商品价格 * 折扣 = 优惠多少钱
          coupon_prcie = this.good_price - (this.good_price * (chooes_coupon.valueDesc * 0.1));
          // 如果可以优惠的价格大于 最大优惠价格 
          if(coupon_prcie > this.accDiv(chooes_coupon.value,100)){
            coupon_prcie = this.accDiv(chooes_coupon.value,100);// 最终优惠价格 = 最大优惠价格
          }
          
          this.pay_price = (this.good_price - coupon_prcie).toFixed(2);
          // console.log(this.pay_price);
        }else{
          // 当前为现金劵 直接抵扣金额
          this.pay_price = this.good_price - this.accDiv(chooes_coupon.value,100);
        }
      }
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    // 点击支付按钮
    pay(){
      let message = "";
      if(this.gameinfo.oper == 'IOS'){
        message = "该角色限iOS版登录，安卓设备无法使用";
      }else{
        message = "该角色限安卓版登录，IOS设备无法使用";
      }
      this.$dialog.confirm({
        message: message,
      }).then(() => {
        this.$router.push({
          path:"paymode",
          query:{
            gameid:this.gameinfo.gid,
            OperSys:this.gameinfo.oper,
            cid:this.choesnCoupon_id
          }
        })
      }).catch(() => {

      })

    },
     // 两数相除
    accDiv(num1,num2){
      var t1,t2,r1,r2;
      try{
        t1 = num1.toString().split('.')[1].length;
      }catch(e){
        t1 = 0;
      }
      try{
        t2=num2.toString().split(".")[1].length;
      }catch(e){
        t2=0;
      }
      r1=Number(num1.toString().replace(".",""));
      r2=Number(num2.toString().replace(".",""));
      return (r1/r2)*Math.pow(10,t2-t1);
    }
  },
  watch: {
    
  },
}
</script>
<style lang="less" scoped>
  .con_order_div{
    position: relative;
    padding-top: 0.46rem;
    font-size: 0.16rem;
  }
  .van-popover{
    .van-row{
      width: 1rem;
      font-size: 0.15rem;
      height: 0.38rem;
      text-align: center;
      border-top: 0.01rem solid #3F3E48;
      line-height: 0.35rem;
    }
  }
  .tips{
    width: 100%;
    height: 0.38rem;
    padding: 0.1rem;
    box-sizing: border-box;
    background-color: #FFFAEF;
    color: #e74e4b;
    font-size: 0.12rem;
  }
  .collId{
    width: 100%;
    height: 0.79rem;
    padding: 0.1rem;
    margin-top: 0.05rem;
    background-color: #FFF;
    box-sizing: border-box;
    font-size: 0.14rem;
  }
  .img_warp{
    width: 0.18rem;
    height: 0.18rem;
    img{
      width: 100%;
      transform: translateY(0.02rem);
    }
  }
  .font1{
    color: #1E1E1E;
  }
  .font2{
    color: #888;
  }
  .gameinfo,
  .coupon{
    width: 100%;
    background-color: #FFF;
    overflow: hidden;
    margin-top: 0.05rem;
  }
  .gameinfo_area{
    height: 0rem;
    overflow: hidden;
    padding-bottom: 1.916rem;
  }
  .reminder_div{
    width: 100%;
    margin-top: 0.1rem;
    overflow: hidden;
    color: #1E1E1E;
  }
  .payment{
    position: fixed;
    bottom: 0rem;
    width: 100%;
    background-color: #FFF;
    height: 0.48rem;
    .pay{
      height: 0.48rem;
      background-color: #E74E4B;
      .van-button{
        width: 100%;
        height: 100%;
        padding: 0rem;
        background-color: #E74E4B;
        color: #FFF;
        text-align: center;
        font-size: 0.17rem;
        border: 0rem;
      }
    }
    .price{
      > p{
        text-align: center;
        line-height: 0.48rem;
        .id5_red{
          font-weight: bold;
        }
      }
    }
  }
  .reminder_div{
    padding: 0rem 0.08rem;
    box-sizing: border-box;
    font-size: 0.14rem;
  }
  
</style>